<html>
<head>
	<LINK href="./res/common.css" rel="stylesheet" type="text/css">
	<LINK href="./res/grid-editor.css" rel="stylesheet" type="text/css">
	
	<script type="text/javascript" src="Scene/json3.js"></script>
	<script type="text/javascript" src="Scene/json3.js"></script>
	
	
	<script type="text/javascript" src="Scene/dom-utils.js"></script>
	
	<script type="text/javascript" src="Scene/canvas-extentions.js"></script>
	<script type="text/javascript" src="Scene/shape.js"></script>
	<script type="text/javascript" src="Scene/line.js"></script>
	<script type="text/javascript" src="Scene/responsive-line.js"></script>
	<script type="text/javascript" src="Scene/rect.js"></script>
	<script type="text/javascript" src="Scene/responsive-rect.js"></script>
	<script type="text/javascript" src="Scene/image.js"></script>
	<script type="text/javascript" src="Scene/circle.js"></script>
	<script type="text/javascript" src="Scene/arrow.js"></script>
	<script type="text/javascript" src="Scene/text.js"></script>
	<script type="text/javascript" src="Scene/irregular-shape.js"></script>
	<script type="text/javascript" src="Scene/responsive-irregular-shape.js"></script>
	
	<script type="text/javascript" src="Scene/scene.js"></script>
	
	
	<script type="text/javascript" src="Scene/animation.js"></script>
	<script type="text/javascript" src="Scene/draggable.js"></script>
	
	<script type="text/javascript" src="Painter/painter.js"></script>
	<script type="text/javascript" src="Painter/irregular-shape-painter.js"></script>	
	
	<script type="text/javascript" src="sceneEditor.js"></script>	
</head>
<body>	
	<table style="width:100%;height:100%;">
		<tr>			
			<td colspan="2" style="height:30px;" class="page-header">
				<div class="title">
					<span>Moshu's Canvas Library - Demos - Scene Editor</span>				
				</div>
				<div class="menu">
					MENU : &nbsp;&nbsp;&nbsp;<a href="./index.html"> Home </a> | <a href="./tutorial.html"> Tutorials </a> | <a href="./editor.html"> Demo: Scene Editor </a> | <a href="./snake.html"> Demo: Snake game </a> | <a href="./res/canvas.zip"> Download </a>
				</div>				
			</td>
		</tr>
		<tr>
			<td style="">
				<div style="background-image:url('./res/scene-bg.png');max-width:100%;max-height:100%;overflow:scroll;height:100%;width:100%;text-align:center;">
					<canvas width="800" height="500" id="scene" style="border:2px solid black;"></canvas>	
				</div>
			</td>
			<td rowspan="2" style="vertical-align:top;" class="properties-panel">
				<div class="properties-title"/>
					Scene Properties					
				</div>
				<div class="properties">
					<div class="property category">
						Grid Properties
					</div>
					<div class="property">
						<div class="label">Grid width(px)</div>
						<div class="value"><input type="text" id="gridWidth" value="500"/></div>						
					</div>
					<div class="property">
						<div class="label">Grid height(px)</div>
						<div class="value"><input type="text" id="gridHeight" value="500"/></div>						
					</div>
					<div class="property">
						<div class="label">Offset left (%)</div>
						<div class="value"><input type="text" id="offsetLeft" value="5"/></div>						
					</div>
					<div class="property">
						<div class="label">Offset right (%)</div>
						<div class="value"><input type="text" id="offsetRight" value="5"/></div>						
					</div>
					<div class="property">
						<div class="label">Offset top (%)</div>
						<div class="value"><input type="text" id="offsetTop" value="5"/></div>						
					</div>
					<div class="property">
						<div class="label">Offset bottom (%)</div>
						<div class="value"><input type="text" id="offsetBottom" value="5"/></div>						
					</div>
					<div class="property">
						<div class="label">Cell size (% width)</div>
						<div class="value"><input type="text" id="cellSize" value="10"/></div>						
					</div>
					<div class="property category">
						Shape Actions
					</div>
					<div class="property">
						<div class="label">
							Irregular
						</div>
						<div class="value">
							<input type="button" value="Create" onclick="startIrregularShape()"/>							
						</div>						
					</div>
					<div class="property">
						<div class="label">
							Finalize
						</div>
						<div class="value">
							<input type="button" value="Finalize" onclick="finalizeShape()"/>						
						</div>						
					</div>
					<div class="property category">
						Global Actions
					</div>
					<div class="property">
						<div class="label">
							Reset Grid
						</div>
						<div class="value">
							<input type="button" value="Refresh" onclick="if(confirm('Are you sure you want to refresh?')){refreshGame();}"/>
						</div>						
					</div>
					<div class="property">
						<div class="label">
							Serialize
						</div>
						<div class="value">
							<input type="button" value="Serialize" onclick="serializeScene()"/>
						</div>						
					</div>
				</div>
			</td>
		</tr>
		<tr>
			<td class="property category">
				Output:<br>
				<textarea id="output" style="width:100%; height:150px"></textarea>
			</td>
		</tr>
	</table>		
	<script type="text/javascript">
		var scene = new Scene("scene");
		scene.setBackgroundColor("beige");
		var editor = new SceneEditor(scene);		
		function getValue(id){
			return document.getElementById(id).value;
		}
		function getInt(id){
			return parseFloat(document.getElementById(id).value);
		}		
		function refreshGame(){				
			scene.canvas.width = getInt("gridWidth");
			scene.canvas.height = getInt("gridHeight");
			editor.offsetLeft = getInt("offsetLeft");
			editor.offsetRight = getInt("offsetRight");
			editor.offsetTop = getInt("offsetTop");
			editor.offsetBottom = getInt("offsetBottom");
			editor.cellSize = getInt("cellSize");				
			editor.draw();
						
			/* var shapes = [new ResponsiveIrregularShape([{"x":5,"y":25},{"x":5,"y":85},{"x":25,"y":85},{"x":15,"y":25}]),new ResponsiveIrregularShape([{"x":75,"y":35},{"x":65,"y":95},{"x":95,"y":85},{"x":75,"y":35}]),new ResponsiveIrregularShape([{"x":25,"y":5},{"x":35,"y":15},{"x":55,"y":15},{"x":55,"y":5}])];
			for(var i=0;i<shapes.length;i++){
				var shape = shapes[i];
				shape.strokeColor = "blue";
				shape.strokeWidth =5;
				scene.add(shape);
				scene.invalidate();
			} */
		}
		refreshGame();
		
		function startIrregularShape(){
			editor.startResponsiveIrregularShape();
		}
		function finalizeShape(){
			editor.finalizeShape();
		}
		function serializeScene(){
			var str = editor.serialize();
			document.getElementById("output").value = str;
		}
	</script>
</body>
</html>